<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <title>导航</title>
        <link rel="stylesheet" href="lib/layui/css/layui.css">
        <link rel="stylesheet" href="css/common.css">
        <script src="js/common.js"></script>
        <style type="text/css">
            .nav-header {
                margin: 30px 0;
            }
            .nav-header  h5{
                font-weight: 300;
            }
            .nav-item {
                width: 200px;
                height: 160px;
                border-radius: 20px;
                padding: 5px;
                font-weight: 300;
                font-size: 12px;
                border: 1px dotted cornflowerblue;
                display: inline-table;
                margin: 2px;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }
            .nav-item:hover {
                background-color: antiquewhite;
            }
            .nav-title {
                font-size: 14px;
                font-weight: 600;
                text-align: center;
            }
            .nav-auth {
                font-size: 9px;
                font-width: 500;
                text-align: center;
            }
            .nav-info {
                word-break: break-word;
            }
            .collatiem{
                font-weight: 600;
                color: beige;
                font-size: 1.2rem;
            }
            .collatiem-0{
                background-color: deepskyblue;
            }
            .collatiem-1{
                background-color: cadetblue;
            }
            .collatiem-config{
                background-color: darkgoldenrod;
            }
            .layui-container {
                width: 90%;
            }
        </style>
    </head>
    <body>
        <div class="layui-container">
            <div class="layui-row nav-header">
                <h1>常用资源导航</h1>
                <h5>更多资源维护，可发送内容邮件至<a href="mailto:dong.zhang8@pactera.com"><i class="layui-icon" style="font-size: 30px; color: #1E9FFF;">dong.zhang8@pactera.com</i></a>申请维护。</h5>
            </div>
            <div class="layui-row">
                <div class="layui-collapse" id="itemview">


                </div>
            </div>
        </div>
        <script src="lib/layui/layui.js"></script>
        <script id="navItems" type="text/html">
            {{#  layui.each(d, function(index, itemlist){ }}
            <div class="layui-colla-item">
                <h2 class="layui-colla-title collatiem collatiem-{{index%2}}">{{itemlist.itemtitle}}</h2>
                <div class="layui-colla-content layui-show">
                {{#  layui.each(itemlist.itemlist, function(index, item){ }}
                <a href="{{ item.href }}" target="_blank" title="{{ item.title + item.title + item.info}}">
                    <div class="nav-item" style="background-image: url('{{ item.bgimg }}')">
                        <div class="nav-title">{{ item.title }}</div>
                        <div class="nav-auth">维护：{{ item.auth }}</div>
                        <div class="nav-info">{{ item.info }}</div>
                    </div>
                </a>
                {{#  }) }}
                </div>
            </div>
            {{#  }) }}
        </script>
        <script id="configItems" type="text/html">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title collatiem collatiem-config">常用配置查询</h2>
                <div class="layui-colla-content layui-show">
                {{#  layui.each(d, function(index, item){ }}
                <div class="nav-item">
                    <div class="nav-title">{{ item.title}}</div>
                    <div class="nav-auth">联系人：{{ item.auth }}</div>
                    <div class="nav-info">{{ item.info }}</div>
                </div>
                {{#  }) }}
                </div>
            </div>
        </script>
        <script>
            //一般直接写在一个js文件中
            layui.use(['layer', 'form','element','laytpl','jquery'], function(){
                var layer = layui.layer
                    ,element = layui.element
                    ,laytpl = layui.laytpl
                    ,jquery = layui.jquery
                    ,form = layui.form;
                var contextHtml = "";
                jquery.get("data/data.json?req="+Math.random(),function(data){
                    laytpl(navItems.innerHTML).render(data.web, function(html){
                        contextHtml+=html;
                    });
                    laytpl(configItems.innerHTML).render(data.config, function(html){
                        contextHtml+=html;
                    });
                    document.getElementById('itemview').innerHTML = contextHtml;
                    element.render('collapse');
                });

                //layer.msg('Hello World');
            });
        </script>
    </body>
</html>